I'm using the example from w3schools to create a series of collapsible sections on a single html page. The collapsible is made as a combination of CSS and some embedded JavaScript code.
Suppose that the visitor of the page wants to search on the page using the "Find in page" (CTRL-F) function of the browser. If a hit is found, the browser will move to the hit (and highlight it), but it remains hidden in the collapsible. How would I go about to automagically open that collapsible when the search hits?
Limitation: I don't want to use external libraries like jQuery. The html page should end up on a local drive and should work without internet access.
Simplified code from w3schools is given below. Suppose the user hits CTRL-F and searches for supercalifragilistic, the browser will highlight the first occurence and move focus to it. But it stays hidden in the collapsible. Is there a way to open up the collapsible following a successful search?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Animated Collapsibles</h2>
<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
<p>Collapsible 1 text supercalifragilistic.</p>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body>
</html>